import L from 'leaflet'
import * as SuperMap from '@supermap/iclient-leaflet'
import makerImage from '@/assets/image/home/maker.png'
import { markerDanger, markerSupervise, markerVideo } from './mock'
import { listBusiness } from '../../../api/common.js'
const mixinsData = {
  data () {
    return {
      // 显示在地图上的设施
      checkedView: [],
      chooseView: [
        {
          image:
            'data:image/svg+xml,' +
            encodeURIComponent(
              '<svg t="1649559628627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1361" width="200" height="200"><path d="M963.8 290.9l-47.9-103.1c-7.8-16.9-26.3-26.1-44.5-22.3L605 221.3l0.1 0.3c-65.2 16.9-113.2 76.2-113.1 146.7 0.2 83.2 70 151.8 153.2 150.7 27-0.4 52.3-7.8 74.2-20.6l0.2 0.6 230.6-158.2c16.1-11.1 21.8-32.2 13.6-49.9z" p-id="1362" fill="#1296db"></path><path d="M376 618V415c0-22.1-17.9-40-40-40h-43c-30.4 0-59.7 11.6-82 32.4L90.7 519.9a79.915 79.915 0 0 0-25.4 58.4V830c0 22.1 17.9 40 40 40h20.3c0-70.8 57.4-128.4 128.3-128.4S382.1 799 382.1 869.9c0 0.1 268.5 0.2 268.5 0.1 0-70.8 57.4-128.4 128.2-128.4S907 799.3 907 870.1c0 0.1 41.3-0.1 41.3-0.1 22.1 0 40-17.9 40-40V698c0-22.1-17.9-40-40-40H416c-22.1 0-40-17.9-40-40z" p-id="1363" fill="#1296db"></path><path d="M255.6 873.6m-81 0a81 81 0 1 0 162 0 81 81 0 1 0-162 0Z" p-id="1364" fill="#1296db"></path><path d="M780.6 873.6m-81 0a81 81 0 1 0 162 0 81 81 0 1 0-162 0Z" p-id="1365" fill="#1296db"></path><path d="M980.7 455.7c0.1-32.1-35.7-51.2-62.3-33.3L749.1 536.1c-58.5 36-104.7 34.6-136.1 29.4-82.7-13.7-124.9-61.2-146.3-110C439.8 394 446 488 446 488v58.4c0 22.1 17.9 40 40 40h454.4c22.1 0 39.9-17.8 40-39.9l0.3-90.8z" p-id="1366" fill="#1296db"></path></svg>'
            ),
          label: '应急避难所',
          value: markerDanger,
          layer: null
        },
        {
          image:
            'data:image/svg+xml,' +
            encodeURIComponent(
              '<svg t="1649559861547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1793" width="200" height="200"><path d="M688.6 131.3l-615 233.8c-7.8 3-12.9 10.4-12.9 18.7V776c0 11 9 20 20 20H475c4.5 0 8.9-1.5 12.4-4.3L955.7 420c4.8-3.8 7.6-9.6 7.6-15.7V150c0-11-9-20-20-20H695.7c-2.5 0-4.9 0.4-7.1 1.3zM422 746.4H130c-11 0-20-9-20-20V431c0-11 9-20 20-20h292c11 0 20 9 20 20v295.4c0 11-9 20-20 20z" p-id="1794" fill="#1296db"></path><path d="M276.1 682.9c57.4 0.5 104.1-46.2 103.6-103.6-0.5-55.8-46-101.3-101.8-101.8-57.4-0.5-104.1 46.2-103.6 103.6 0.5 55.8 46 101.3 101.8 101.8z m-1.3-171.6c39.9-1.3 72.4 31.2 71.1 71.1-1.1 36.1-30.5 65.5-66.6 66.6-39.9 1.3-72.4-31.2-71.1-71.1 1.1-36 30.5-65.4 66.6-66.6zM880 804h-80c-11 0-20-9-20-20V654.7c0-16.8-19.4-26.1-32.5-15.6l-72 57.9c-4.7 3.8-7.5 9.5-7.5 15.6V876h1v12c0 11 9 20 20 20h191c11 0 20 9 20 20v14c0 11 9 20 20 20h42V750h-42c-11 0-20 9-20 20v14c0 11-9 20-20 20z" p-id="1795" fill="#1296db"></path><path d="M273.4 617c22.4 1.8 40.9-16.8 39.2-39.2-1.4-17.7-15.5-31.9-33.3-33.3-22.4-1.8-40.9 16.8-39.2 39.2 1.5 17.8 15.6 31.9 33.3 33.3z" p-id="1796" fill="#1296db"></path></svg>'
            ),
          label: '视频监控 ',
          value: markerVideo,
          layer: null
        },
        {
          image:
            'data:image/svg+xml,' +
            encodeURIComponent(
              '<svg t="1649559882387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1989" width="200" height="200"><path d="M511.1 183.8c-250 0.5-451.7 246.7-451.3 551.1 0.1 68.9 10.6 134.9 29.7 195.7 5.9 18.9 20.8 31.3 37.4 31.3h769.9c16.6 0 31.5-12.5 37.4-31.4 19.1-61 29.6-127.2 29.6-196.4 0-304.2-202.8-550.8-452.7-550.3z m-284 615.3c1.8 23.3-16.5 43.2-39.9 43.2h-5c-21 0-38.4-16.3-39.9-37.2-0.7-9.2-1-18.4-1-27.8 0-203.6 165.7-369.9 369.3-370.5 54.5-0.2 106.3 11.4 152.9 32.4 26.5 11.9 31.8 47.3 10 66.5l-4.2 3.7c-11.7 10.3-28.3 12.8-42.5 6.6-37.4-16.5-79-25.2-122.8-24-147.4 4-273.4 129.7-277.6 277.1-0.3 10-0.1 20 0.7 30z m380.7-54c1.9 7.6 2.9 15.5 3 23.6 0.6 56.2-45 102.6-101.2 103.1-57 0.5-103.3-45.8-102.8-102.8 0.4-55.8 46.4-101.3 102.2-101.2 10.3 0 20.3 1.6 29.6 4.5 10.1 3.1 21.2 0.8 28.9-6.4l91.4-79.1c10.9-10.1 27.9-9.8 38.5 0.7 10.7 10.7 10.9 28.1 0.4 39l-82.7 90.2c-7.1 7.5-9.8 18.3-7.3 28.4z m273.5 60.4c-1.6 20.8-19 36.7-39.9 36.7h-5c-23.3 0-41.6-19.9-39.9-43.2 0.5-7.2 0.8-14.5 0.8-21.8 0-46.5-11.1-90.4-30.8-129.2-7.4-14.7-5-32.4 6-44.6l3.6-4c18.6-20.8 52.4-16.6 65.2 8.2 26.2 50.8 41 108.5 41 169.6 0 9.5-0.3 19-1 28.3z" p-id="1990" fill="#1296db"></path></svg>'
            ),
          label: '监测设备 ',
          value: markerSupervise,
          layer: null
        }
      ],
      map: null,
      // 28.82 ：lat 纬度
      // 104.34：lng 经度
      currentLngLat: [28.840932282578, 104.343276369074],
      currentInfo: {},
      markerIcon:
        'data:image/svg+xml,' +
        encodeURIComponent(
          '<svg t="1649556605690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2225" width="200" height="200"><path d="M511.999 959.753S176.185 585.513 176.185 400.06c0-185.448 150.362-335.815 335.814-335.815 185.456 0 335.816 150.368 335.816 335.815C847.815 585.512 512 959.753 512 959.753z m0-686.495c-70.027 0-126.805 56.779-126.805 126.805 0 70.03 56.778 126.807 126.805 126.807 70.029 0 126.806-56.777 126.806-126.807 0-70.026-56.777-126.805-126.806-126.805z" fill="#d81e06" p-id="2226"></path></svg>'
        ),
      commonIconUrl:
        'data:image/svg+xml,' +
        encodeURIComponent(
          '<svg t="1650379931824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2770" width="200" height="200"><path d="M506.397399 91.074252c40.774659 0 79.082126 7.737218 114.941845 23.186072 35.8413 15.459087 66.918086 36.347836 93.230358 62.649875 26.962072 26.977421 48.173163 58.207703 63.636343 93.726661 15.44476 35.518958 23.186072 73.671906 23.186072 114.446565 0 55.245232-15.46318 114.936729-46.37112 179.066305-30.92329 64.128553-64.793702 123.493615-101.623515 178.077791-36.843116 54.605665-85.834924 118.070092-147.002029 190.416817-61.170175-72.346725-110.173239-135.811152-147.006122-190.416817-36.843116-54.584176-70.709435-113.949238-101.617375-178.077791-30.92329-64.128553-46.372144-123.82005-46.372144-179.066305 0-40.774659 7.722892-78.927607 23.186072-114.446565 15.443737-35.518958 36.654828-66.74924 63.631226-93.726661 26.304086-26.303063 57.380872-47.191812 93.235474-62.649875C427.300946 98.81147 465.60432 91.074252 506.397399 91.074252L506.397399 91.074252zM506.397399 490.645646c14.462387 0 28.119431-2.788509 40.947598-8.385994 12.824073-5.584182 23.830755-12.978593 33.047674-22.198581 9.865695-9.865695 17.593703-21.212114 23.186072-34.040281 5.583159-12.82305 8.387018-26.466792 8.387018-40.942481 0-14.45727-2.803859-28.119431-8.387018-40.942481-5.592368-12.82919-13.320377-23.832801-23.186072-33.051767-9.215896-9.865695-20.222577-17.419741-33.047674-22.690792-12.828167-5.259794-26.485211-7.895831-40.947598-7.895831-14.470573 0-28.114314 2.636037-40.942481 7.895831-12.824073 5.27105-23.846104 12.824073-33.051767 22.690792-9.865695 9.219989-17.60189 20.227694-23.180955 33.051767-5.597485 12.828167-8.387018 26.485211-8.387018 40.942481 0 14.475689 2.789533 28.119431 8.387018 40.942481 5.579065 12.828167 13.31526 24.174586 23.180955 34.040281 9.205663 9.219989 20.227694 16.619516 33.051767 22.198581C478.277968 487.857137 491.926826 490.645646 506.397399 490.645646L506.397399 490.645646zM506.397399 490.645646" p-id="2771" fill="#1296db"></path></svg>'
        ),
      commonIcon: {},
      commonIconRedUrl: makerImage,
      commonIconRed: {},
      // 图层信息 Start
      tdtType: {
        img: {},
        ver: {}
      },
      urlType: {},
      lableType: {},
      currentTdtType: 'img',
      // 图层信息 End
      tdtKey: '1d109683f4d84198e37a38c442d68311',
      currentDom: null
    }
  },
  created () {},
  methods: {
    // 设置点击查询场界
    setHandleClick () {
      this.map.on('click', (evt) => this.handleCbfn(evt.latlng.lng, evt.latlng.lat))
    },
    handleCbfn (x, y) {
      //   var x = evt.latlng.lng
      //   var y = evt.latlng.lat
      console.log(x, y)
      this.currentClickXY = [y, x]

      if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
        return
      }
      // 通过一系列Points创建多边形 返回一个	GeoJSONObject
      const params = L.polygon([
        [y, x],
        [y - 0.00001, x - 0.00001],
        [y + 0.00001, x + 0.00001]
      ])
      console.log(params)
      this.featuresBySQL(params)
    },
    // SQL查询
    featuresBySQL (geometry, SMUSERID) {
      this.boundary && this.boundary.removeFrom(this.map)
      this.popupSQL && this.popupSQL.removeFrom(this.map)

      let geometryParam = null
      let searchMethod = ''

      if (geometry) {
        searchMethod = 'getFeaturesByGeometry'
        // 数据集几何查询参数类 传入参数 返回一个数据集几何查询参数类 用于后续
        geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
          datasetNames: ['处理后的数据:屏山县用地布R_adjust_adjust'], // 	数据集集合中的数据集名称列表。
          geometry,
          spatialQueryMode: 'INTERSECT'
        })
      }
      if (SMUSERID) {
        searchMethod = 'getFeaturesBySQL'
        geometryParam = new SuperMap.GetFeaturesBySQLParameters({
          queryParameter: {
            // name: '屏山县用地布R_adjust_adjust',
            attributeFilter: 'SmUserID = ' + SMUSERID
          },
          ss: 111,
          datasetNames: ['处理后的数据:屏山县用地布R_adjust_adjust']
        })
      }

      // 要素数据集类  this.featuresBySQLUrl = this.$BASE_URL + '/iserver/services/data-peizhun/rest/data', getFeaturesByGeometry
      /**
       *  new SuperMap.FeatureService(this.featuresBySQLUrl) 返回一个提供：ID 查询，范围查询，SQL 查询，几何查询，bounds 查询，缓冲区查询，地物编辑。的对象
       *  getFeaturesByGeometry 数据集几何查询服务类。
       */
      new SuperMap.FeatureService(this.featuresBySQLUrl)[searchMethod](
        geometryParam,
        (serviceResult) => {
          const id = serviceResult.result.features.features[0].properties.SMUSERID
          if (id == '10') {
            const coordinates = [
              [104.32709868198782, 28.870996520380938],
              [104.32697018232511, 28.87108732745249],
              [104.32670688427004, 28.87127864101754],
              [104.32626291933752, 28.871657635112953],
              [104.32810954839204, 28.873226786701746],
              [104.32881649775777, 28.873853800544982],
              [104.32975798801556, 28.873005818237797],
              [104.32709868198782, 28.870996520380938]
            ]
            serviceResult.result.features.features[0].geometry.coordinates[0][0] = coordinates
            this.boundary = L.geoJSON(serviceResult.result.features)
          } else {
            this.boundary = L.geoJSON(serviceResult.result.features)
          }

          // 把绘制的边界加入到地图
          this.boundary.addTo(this.map)

          if (serviceResult.result?.features?.features?.length > 0) {
            // console.log(serviceResult.result.features.features[0])
            const temp = serviceResult.result.features.features[0]
            this.getListBusiness(temp.properties.SMUSERID, temp.geometry.coordinates[0][0][0])
          }
        }
      )
    },
    // 根据ID查询企业信息
    getListBusiness (SMUSERID, lngLat) {
      if (this.currentDom) {
        // 如何存在监听那边就移除
        this.currentDom.removeEventListener('click', () => {})
      }
      // let { data } = res
      let data = {}
      data.id = 1007
      data.name = '宜宾万鹏时代科技有限公司'
      data.manager = '李卓'
      data.managerPhone = '0831-5881996'
      data.park = '王厂园区'
      data.type = '电子专用材料'
      console.log(data)
      if (SMUSERID == 10) {
        this.popupSQL = L.popup({
          closeOnClick: false,
          className: 'XXXXXX'
        })
          .setLatLng(lngLat.reverse())
          .setContent(
                `
              <div>
              <p>企业名称:${data.name}</p>
              <p>负责人:${data.manager}</p>
              <p>负责人电话:${data.managerPhone}</p>
              <p style="color:#31B9F7;cursor: pointer;" id="${data.id}">查看详情</p>
            </div>`
          )
          .openOn(this.map)
        this.currentDom = document.getElementById(data.id)
        this.currentDom.addEventListener('click', () => {
          console.log('点击事件')
          this.$parent.handleDetailForm(data)
        })
        this.map.flyTo(lngLat, 15)
        return
      }

      // }
      if (data) {
        this.popupSQL = L.popup({
          closeOnClick: false,
          className: 'XXXXXX'
        })
          .setLatLng(lngLat.reverse())
          .setContent(
                `
                <div>
                  <h3 class="big-titile">站点1</h3>
                  <span class="small-title"><span>PM2.5</span><span>50μg/m</span></span>
                  <span class="small-title"><span>PM10</span><span>20μg/m</span></span>
                  <span class="small-title"><span>臭氧</span><span>80μg/m</span></span>
                  <span class="small-title"><span>空气质量</span><span>200</span></span>
                </div>`
          )
          .openOn(this.map)
        this.currentDom = document.getElementById(data.id)
        // this.currentDom.addEventListener('click', () => {
        //   console.log('点击事件')
        //   this.$parent.handleDetailForm(data)
        // })
        this.map.flyTo(lngLat, 15)
      }
    },
    // 企业表格被选中行
    rowClick (e) {
      console.log(e)
      this.featuresBySQL(null, e.id)
      //   let temp = this.gcj02towgs84(Number(e.longitude), Number(e.dimension))
      //   this.handleCbfn(Number(e.longitude), Number(e.dimension))
      //   this.map.flyTo([Number(e.longitude), Number(e.dimension)].reverse(), 15)
    },
    // 清空图层信息
    clearMap () {
      this.circle && this.circle.removeFrom(this.map)
      this.accident && this.accident.removeFrom(this.map)
      this.polyline && this.polyline.removeFrom(this.map)
      this.popup && this.popup.removeFrom(this.map)
      this.circleWaterLine && this.circleWaterLine.removeFrom(this.map)
    }
    // 企业查看详情
    // handleDetailForm (row) {
    //   alert(row)
    //   getCompanyDetail(row.id).then((res) => {
    //     console.log(res)
    //   })
    // }
  }
}
export default mixinsData
